<script setup>
import HomePanel from "./HomePanel.vue";
import { getHotAPI } from "@/apis/home";
import { onMounted, ref } from "vue";
const hotList = ref([]);
const getHotList = async () => {
  const res = await getHotAPI();
  hotList.value = res;
};

const detail = (id) => {
  router.replace({ path: "/detail/1" });
  console.log(id);
};
onMounted(() => getHotList());
</script>

<template>
  <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
    <ul class="goods-list">
      <li v-for="item in hotList" :key="item.productId">
        <RouterLink :to="'/detail/' + item.productId">
          <img v-img-lazy="item.image" alt="" />
          <!-- <h3 class="name">{{ item.productName }}</h3> -->
          <div class="desc">{{ item.des }}</div>
          <div class="price"><span>￥</span>{{ item.price }}</div>
        </RouterLink>
      </li>
    </ul>
  </HomePanel>
</template>

<style scoped lang='scss'>
.goods-list {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  // height: 426px;

  li {
    width: 300px;
    // height: 400px;
    padding: 5px;
    transition: all 0.5s;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      border: 1px solid #ff5000;
    }

    img {
      width: 306px;
      height: 306px;
      border-radius: 10px;
    }

    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }

    .desc {
      margin: 0 auto;
      margin-bottom: 10px;
      padding: 8px;
      color: #000;
      max-height: 60px; /* 设置最大高度，确保两行的高度 */
      line-height: 24px; /* 设置行高 */
      font-size: 18px;
      display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      -webkit-line-clamp: 2; /* 限制显示两行 */
      overflow: hidden; /* 隐藏超出范围的内容 */
      text-overflow: ellipsis; /* 使用省略号 */
    }
    .price {
      padding-left: 5px;
      color: #ff5000;
      font-size: 20px;
      font-weight: 600;
      span {
        font-size: 13px;
      }
    }
  }
}
</style>